<template>
  <div class="subentryContent">
    <div class="top">
      <p>本年度开销项比例 :</p>
    </div>
    <div class="charts" ref="subentry"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, watch } from 'vue'
import * as echarts from 'echarts'

const props = withDefaults(
  defineProps<{
    subentryList: any
  }>(),
  {
    subentryList: []
  }
)

const subentryList = ref([])

const subentry = ref()

const mkCharts = () => {
  const myCharts = echarts.init(subentry.value)
  const option = {
    title: {
      text: '',
      left: 'center',
      top: 20,
    },
    tooltip: {
      trigger: 'item'
    },
    visualMap: {
      show: false,
      min: 800,
      max: 45000,
      inRange: {
        colorLightness: [0.7, 0.1]
      }
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: '90%',
        center: ['50%', '50%'],
        data: subentryList.value,
        roseType: 'radius',
        label: {
          color: '#fbefb8',
          fontSize: 20,
        },
        labelLine: {
          lineStyle: {
            color: '#fbefb8'
          },
          smooth: 0.2,
          length: 10,
          length2: 20
        },
        itemStyle: {
          color: 'rgba(81, 29, 30, 0.8)',
          shadowBlur: 200,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },

        // animationType: 'scale',
        // animationEasing: 'elasticOut',
        animationDelay: function (idx) {
          return Math.random() * 200;
        }
      }
    ]
  };
  myCharts.setOption(option)
}


watch(props, () => {
  if (props.subentryList) {
    subentryList.value = props.subentryList.sort(function (a, b) {
      return a.value - b.value;
    }),
    mkCharts()
  }
})

onMounted(() => {
  // mkCharts()
})



</script>

<style lang="scss" scoped>
.subentryContent {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  padding-left: 10px;

  .top {
    margin-bottom: 30px;

    p {
      color: #fbefb8;
      font-size: 30px;
      font-weight: 500;
    }
  }
  .charts {
    // background: #2c1413;
    // opacity: 0.6;
    width: 100%;
    height: 340px;
  }
}
</style>